<!-- 医生排班 -->
<template>
	<view class="container">
		<headMenuRegion title="医生排班" :contentStyle="{backgroundColor:'transparent'}"></headMenuRegion>
		
		<view class="row">
			<view class="column" v-for="(item, index) in getCurrentWeekDates()" :key="index" :class="tabTimeIndex == index && 'column-active'" @click="onSelectTime(index)">
				<view class="dayName" :class="tabTimeIndex == index && 'dayName-active'">
					{{ item.dayName }}
				</view>
				<view class="date" :class="tabTimeIndex == index && 'date-active'">
					{{ item.date }}
				</view>
			</view>
		</view>
		
		<view class="" style="padding: 20rpx;">
			<view class="doctor-list" v-for="(item, index) in doctorList" :key="index">
				<image src="/static/icon/icon_avatar.png" mode="aspectFill"></image>
				<view class="content">
					<view class="name">
						{{item.doctorName}}
					</view>
					<view class="register">
						{{item.department}}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {reactive, ref } from "vue";
	import {onLoad} from "@dcloudio/uni-app";
	import {
		mondayDuty,
		tuesdayDuty,
		wednesdayDuty,
		thursdayDuty,
		fridayDuty,
		saturdayDuty,
		sundayDuty
	} from "@/api/index.js"
	const timeList = reactive([])
	const doctorList = ref([])
	
	const tabTimeIndex = ref(0)
	
	onLoad(() => {
		getCurrentWeekDates().forEach((item,index) => {
			if (item.dayName == '今天') {
				tabTimeIndex.value = index;
				getNowDutyList()
			}
		})
	})
	
	// 获取今日值班列表
	async function getNowDutyList() {
		// console.log("执行了")
		// var today = new Date();
		// var dayIndex = today.getDay();
		// var daysOfWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
		// var todayStr = daysOfWeek[dayIndex];
		// let res = null;
		
		let res = null;
		switch(tabTimeIndex.value) {
			case 0:
			  res = await mondayDuty();
			  break;
			case 1:
			  res = await tuesdayDuty();
			  break;
			case 2:
			  res = await wednesdayDuty();
			  break;
			case 3:
			  res = await thursdayDuty();
			  break;
			case 4:
			  res = await fridayDuty();
			  break;
			case 5:
			  res = await saturdayDuty();
			  break;
			case 6:
			  res = await sundayDuty();
			  break;
		}
	
		
		doctorList.value = res;
		
	}
	
	
	// 选择时间
	function onSelectTime(index) {
		tabTimeIndex.value = index;
		getNowDutyList();
	}
	
	// 时间数据
	function getCurrentWeekDates() {
	  const today = new Date(); // 当前时间
	  const day = today.getDay(); // 星期几（0=星期日，1=星期一，...，6=星期六）
	
	  // 计算本周的星期一
	  const diffToMonday = (day === 0 ? -6 : 1) - day; // 如果是星期日，则往前推6天到周一
	  const monday = new Date(today);
	  monday.setDate(today.getDate() + diffToMonday);
	
	  // 获取今天的日期字符串（用于对比）
	  const todayDateString = formatDate(today);
	
	  // 构建本周7天的日期数组
	  const weekDates = [];
	  for (let i = 0; i < 7; i++) {
	    const currentDate = new Date(monday);
	    currentDate.setDate(monday.getDate() + i);
	
	    const dateStr = formatDate(currentDate);
	    const dayName = dateStr === todayDateString ? '今天' : currentDate.toLocaleDateString('zh-CN', { weekday: 'short' });
	
	    weekDates.push({
	      date: dateStr,
	      dayName: dayName
	    });
	  }
	
	  return weekDates;
	}
	
	// 格式化日期为 MM-DD
	function formatDate(date) {
	  const year = date.getFullYear();
	  const month = String(date.getMonth() + 1).padStart(2, '0');
	  const day = String(date.getDate()).padStart(2, '0');
	  return `${month}-${day}`;
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6FA !important;
	}
	.container {
	}
	
	.row {
		display: flex;
		flex-direction: row;
		
		
	}
	.column {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			right: 0;
			height: 30rpx;
			width: 2rpx;
			background-color: #e1e1e1;
			
		}
		
		// border: 1rpx solid #AAAAAA;
		// border-left:none;
		// border-right: 1rpx solid #e1e1e1;
		// border-top: 1rpx solid transparent;
		// border-bottom: 1rpx solid transparent;
		
		
		background-color: #FFF;
		padding: 20rpx 0;
		.dayName {
			
			font-family: '思源黑体';
			font-size: 30rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
			/* 正文色/正文色 */
			color: #1A1A1A;
			
		}
		.dayName-active {
			// color: #0256FF;
			color: #FFF;
		}
		.date-active {
			position: relative;
			color: #FFF !important;
		}
		.date-active::after {
			content: '';
			position: absolute;
			bottom: -10rpx;
			left: -6rpx;
			right: 0;
			margin: auto;
			width: 80rpx;
			// background-color: #0256FF;
			background-color: #FFF;
			height: 4rpx;
			border-radius: 20rpx;
		}
		.date {
			
			font-family: '思源黑体';
			font-size: 26rpx;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
			/* 描边色/描边色辅助 */
			color: #AAAAAA;
			
			margin-top: 4rpx;
		}
		
		
		&:last-child {
			border-right: none;
		}
	}
	
	.column-active {
		background-color: #2BD1B9 !important;
		color: #FFF !important;
		&::after {
			content: '';
			position: absolute;
			right: 0;
			height: 0;
			width: 0;
			background-color: #e1e1e1;
			
		}
	}
	
	
	.doctor-list {
		padding: 26rpx 30rpx;
		background-color: #FFF;
		border-radius: 26rpx;
		
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		
		&:nth-child(1) {
			margin-top: 0;
		}
		
		image {
			width: 98rpx;
			height: 98rpx;
		}
		.content {
			margin-left: 18rpx;
			.name {
				
				font-family: '思源黑体';
				font-size: 28rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				/* 正文色/正文色 */
				color: #1A1A1A;
			}
			.register {
				
				font-family: '思源黑体';
				font-size: 22rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				/* 描边色/描边色辅助 */
				color: #AAAAAA;
				
				
				margin-top: 16rpx;
			}
		}
		
	}
	
</style>